<template>
  <footer class="footer">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-daohang"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/category" tag="li">
          <span class="iconfont icon-leimupinleifenleileibie2"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-gouwuche"></span>
          <p>购物车</p>
        </router-link>
        <router-link to="/myuser" tag="li">
          <span class="iconfont icon-tubiao-"></span>
          <p v-if="flag">我的</p>
          <p v-else>还未登陆哦</p>
        </router-link>
      </ul>
    </footer>
</template>

<script>
import store from '@/store'
export default {
  data () {
    return {
      flag: ''
    }
  },
  mounted () {
    this.flag = store.state.users.login_state
  }
}

</script>
<style lang="scss">
@import '@/lib/reset.scss';
.footer {
  @include rect(100%,.66rem);
  @include background-color(#ffffff);
  border-top: 0.013333rem solid #e5e5e5;
  ul {
    @include rect(100%,100%);
    @include flexbox();
    li {
     @include flex();
     @include rect(auto,100%);
     // 水平垂直居中
     @include flexbox();
     @include flex-direction(column);
     @include justify-content();
     @include align-items();
     span {
       @include font-size(.22rem);
      //  @include color(#646566);
     }
     &.router-link-exact-active,.router-link-active {
       @include color(#30d2bd);
     }
     p {
      @include font-size(.12rem);
     }
    }
  }
 }
</style>
